<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻管理系统</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
    <style type="text/css">
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,.clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 85%;
            margin: 0 auto;
            margin-top: 50px;
        }

        .block {
            width: 100%;
            margin: 0 auto;
            text-align: right;
            margin-top: 20px;
        }

        .comm {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<!-- 引入组件库 -->
<script type="text/javascript" src="js/emelent-ui.js"></script>
<div id="root">
    <div class="all">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>新闻列表</span>
                <div style="float: right; padding: 3px 0;display: flex">
                    <el-input v-model="title" placeholder="请输入新闻标题"></el-input>
                    <el-button type="primary" size="small" @click="submit">查询</el-button>
                </div>
            </div>
            <div class="text item">
                <el-table
                        v-loading="loading"
                        :data="list"
                        style="width: 100%"
                        border
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="id"
                            label="新闻编号"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            align="center"
                            label="新闻标题"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="summary"
                            align="center"
                            label="新闻摘要"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="author"
                            align="center"
                            label="作者"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            align="center"
                            label="创建时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            fixed="right"
                            width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="primary" size="small">查看评论</el-button>
                            <el-button type="success" size="small" @click="commentClick(scope.row.id)">评论</el-button>
                            <el-button @click="deleteClick(scope.row.id)" type="danger" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[2, 5, 10]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
            <el-dialog
                    title="增加评论"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <el-form label-width="80px">
                    <el-form-item label="评论内容" prop="content">
                        <el-input type="textarea" resize="none" v-model="comment.content"></el-input>
                    </el-form-item>
                    <el-form-item label="评论人" prop="name">
                        <el-input v-model="comment.author"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button @click="centerDialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-card>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data() {
            return {
                total: 100,
                list: [],
                pageNum: 1,
                pageSize: 5,
                title: '',
                centerDialogVisible: false,
                comment: {
                    newId: -1,
                    content: '',
                    author: ''
                },
                loading: true
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 每页条数改变
            handleSizeChange(val) {
                this.pageSize = Number(val);
            },
            // 页码改变
            handleCurrentChange(val) {
                this.pageNum = Number(val);
            },
            async getNewDetails() {
                const {pageNum, pageSize} = this
                const {title} = this
                this.loading = true;
                const resp = await axios.get(`http://localhost:8080/newManagerSys/news/list?pageNum=${pageNum}&pageSize=${pageSize}&title=${title}`);
                let result = resp.data;
                if (result.code === 200) {
                    this.loading = false;
                    const {total, pageNum, pageSize, list} = result.data;
                    this.total = total;
                    this.pageNum = pageNum;
                    this.pageSize = pageSize;
                    this.list = list;
                }
            },
            submit() {
                this.getNewDetails();
            },
            handleClick(obj) {
                window.location.href = "comment.html?id=" + obj.id;
            },
            commentClick(id) {
                this.comment.newId = id;
                this.centerDialogVisible = true;
            },
            async onSubmit() {
                this.centerDialogVisible = false;
                const {comment} = this;
                let resp = await axios.post(`http://localhost:8080/newManagerSys/comment/insert`, comment);
                let result = resp.data;
                if (result.code === 200) {
                    this.comment = {};
                    this.$message({
                        showClose: true,
                        message: result.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: result.msg,
                        type: 'error'
                    });
                }
            },
            // 删除
            async deleteClick(id) {
                if (window.confirm("确认删除新闻及所属评论?")) {
                    const resp = await axios.delete(`http://localhost:8080/newManagerSys/news/delete/${id}`);
                    const result = resp.data;
                    if (result.code === 200) {
                        this.getNewDetails();
                        this.$message({
                            showClose: true,
                            message: result.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: result.msg,
                            type: 'error'
                        });
                    }
                }
            },

        },
        watch: {
            pageNum() {
                this.getNewDetails();
            },
            pageSize() {
                this.getNewDetails();
            }
        },
        mounted() {
            this.getNewDetails();
        }
    })
</script>
</body>
</html>